<template>
  <div>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="项目名称查询"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['is_notice.eq']"
          placeholder="催收确认"
          :options="{
            0: '未确认',
            1: '已确认',
          }"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="queryDate"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="handleDateQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:remind="scoped">
        <el-switch
          v-model="scoped.row.is_notice"
          @change="setIsNotice(scoped.row)"
          active-value="1"
          inactive-value="0"
        ></el-switch>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <repay-dialog
      :visible.sync="replayVisible"
      :query-id="queryId"
      @success="getData()"
    ></repay-dialog>

    <repay-edit
      :visible.sync="editVisible"
      @success="getData()"
      :form-data="formData"
      :table-id="tableId"
      :query-id="editId"
    ></repay-edit>

    <replay-confirm
      :visible.sync="confirmVisible"
      @success="getData()"
      :form-data="confirmData"
      :table-id="confirmId"
    ></replay-confirm>

    <post-view :visible.sync="viewVisible" :related-id="viewId"></post-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { sub } from '@vimi/utils-tool'
import RepayDialog from '@/credit/views/city/self/after/repay/RepayDialog'
import RepayEdit from '@/credit/views/city/self/after/repay/RepayEdit'
import ReplayConfirm from '@/credit/views/city/risk/collection/component/register/ReplayConfirm'
import PostView from '@/credit/views/city/risk/PostView'

export default {
  components: { RepayDialog, RepayEdit, ReplayConfirm, PostView },
  props: {},
  data() {
    return {
      tableName: 'datum_repay_list_view_notice',
      params: {
        index: 1,
        size: 10,
      },
      tableData: [],
      totalCount: 0,
      order: {
        pay_time: 'asc',
      },
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name', align: 'center' } },
        { attrs: { label: '地址', prop: 'address', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: '110px' } },
        { attrs: { label: '放款金额(万元)', prop: 'reply_funds', align: 'center' } },
        { attrs: { label: '在保余额(万元)', prop: 'left_funds', align: 'center' } },
        {
          attrs: { label: '本次还款时间', prop: 'pay_time', align: 'center', width: 100 },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '应还本金(元)', prop: 'capital', align: 'center' } },
        { attrs: { label: '已还本金(元)', prop: 'repay_funds_total', align: 'center' } },
        { attrs: { label: '催收确认', align: 'center' }, slot: 'remind' },
        {
          attrs: { label: '待还本金(元)', prop: 'leftCapital', align: 'center' },
          process: v => (+v === 0 ? '已还款' : v),
        },
        {
          attrs: { label: '操作', align: 'center', minWidth: 160 },
          operations: [
            {
              content: '催收确认',
              icon: 'fa fa-bullhorn',
              event: this.handlerConfirm,
            },
            {
              content: '还款确认',
              icon: 'fa fa-rmb',
              event: this.handleEdit,
              // ifRender: row => +row.is_normal === 0,
            },
            {
              content: '还款跟踪',
              icon: 'fa fa-credit-card',
              event: this.handlerRepay,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleView,
            },
          ],
        },
      ],
      loading: false,
      editVisible: false,
      editId: '',
      tableId: '',
      formData: {},

      replayVisible: false,
      queryId: '',

      confirmVisible: false,
      confirmData: {},
      confirmId: '',
      queryDate: [],

      // 查看
      viewId: '',
      viewVisible: false,
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    handleDateQuery() {
      this.params['pay_time.gte'] = ''
      this.params['pay_time.lt'] = ''
      if (!this.queryDate || !this.queryDate.length) {
        return
      }
      let startTime = ''
      let endTime = ''
      const date = new Date(this.queryDate[0])
      startTime = date
        ? `${date.getFullYear()}-${(date.getMonth() + 1 + '').padStart(2, 0)}-01`
        : ''
      endTime = date
        ? `${new Date(this.queryDate[1]).getFullYear()}-${(
            new Date(this.queryDate[1]).getMonth() +
            2 +
            ''
          ).padStart(2, 0)}-01`
        : ''

      this.params['pay_time.gte'] = startTime
      this.params['pay_time.lt'] = endTime
      this.getData()
    },
    handlerConfirm(row = {}) {
      this.confirmVisible = true
      this.confirmData = { ...row }
      this.confirmId = row?.datum_repay_list_id ?? ''
    },
    setIsNotice(row) {
      if (!row.datum_repay_list_id) {
        return this.$message.error('出错了')
      }
      this.$api
        .updateData({
          table: 'datum_repay_list',
          id: row.datum_repay_list_id,
          data: {
            is_notice: row.is_notice,
          },
        })
        .catch(err => {
          this.$message.error(err?.data?.error_description || '更改失败，请重试！')
        })
    },
    handlerRepay(row = {}) {
      this.queryId = row.customer_related_id || ''
      this.replayVisible = true
    },
    handleEdit(row) {
      this.editVisible = true
      this.formData = {
        repay_time: row.pay_time,
        datum_repay_list_id: row.datum_repay_list_id,
        repay_funds: row.leftCapital,
      }
      this.editId = row.customer_related_id || ''
    },
    handleView(row) {
      this.viewId = row.customer_related_id
      this.viewVisible = true
    },
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = res?.data ?? {}
          this.tableData = (data?.data ?? []).map(item => {
            item.leftCapital = sub(item.capital, item.repay_funds_total)
            return item
          })
          this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
